<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-08-29 16:12:54
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-08-31 10:17:57
 * @FilePath: \zjgxpt\zdgy\src\views\home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="home" id="meun">
        <el-container>
            <el-header class="headBody" v-if="userInfo.userType == 1">
                <div class="headBody_left">
                    <img src="@/assets/img/dllogo.png" alt="" />
                    <div>重点工艺管控</div>
                </div>
                <div class="headBody_right">
                    <el-button class="head_text" type="text" icon="el-icon-s-home">APP</el-button>
                    <el-button class="head_text" type="text" icon="el-icon-s-home" @click="goHome">首页</el-button>
                    <el-button class="head_text" type="text" icon="el-icon-d-arrow-right" @click="back()">退出</el-button>
                    <el-button class="head_text" type="text" icon="el-icon-rank" @click="screen">全屏</el-button>
                </div>
            </el-header>
            <el-main>
                <el-container style="height: 100%">
                    <el-aside :width="isCollapse ? '50px' : '208px'">
                        <i class="el-icon-s-fold toggle-button" @click="toggleCollapse" v-if="isCollapse == false"></i>
                        <i class="el-icon-s-unfold toggle-button" @click="toggleCollapse" v-else></i>
                        <!-- 菜单 -->
                        <el-menu :default-active="activePath" router unique-opened :collapse-transition="false"
                            :collapse="isCollapse" class="sidebar el-menu-vertical-demo" @select="openMenu"
                            active-text-color="#398BE2" text-color="#A2A2A2">
                            <!-- 一级循环 -->
                            <fragment v-for="(v, i) in leftNameData" :key="i">
                                <el-submenu :index="v.path ? v.path : i + ''">
                                    <template slot="title">
                                        <el-menu-item :index="v.path" v-if="v.path">
                                            <template slot="title">
                                                <div class="secondaryView">
                                                    <i :class="v.img" :style="{ width: v.width }"></i>
                                                    <span class="meneTitle" slot="title">
                                                        {{ v.title }}</span>
                                                </div>
                                            </template>
                                        </el-menu-item>
                                        <div v-else style="display: flex">
                                            <i :class="v.img" :style="{ width: v.width }"></i>
                                            <span slot="title">{{ v.title }}</span>
                                        </div>
                                    </template>
                                    <!-- 二级循环 -->
                                    <div v-for="(arr, num) in v.children" :key="num">
                                        <!-- 没有三级 -->
                                        <div v-if="arr.children.length == 0 && arr.lever == 0" class="noThreeMenu">
                                            <el-menu-item :index="arr.path">
                                                <template slot="title">
                                                    <!-- 跳查看 -->
                                                    <div class="secondaryView">
                                                        <i :class="arr.img" :style="{ width: arr.width }"></i>
                                                        <span class="meneTitle" slot="title">
                                                            {{ arr.title }}</span>
                                                    </div>
                                                </template>
                                            </el-menu-item>
                                            <!-- 跳编辑 -->
                                            <el-menu-item v-if="arr.path2" :index="arr.path2" class="el-icon-edit">
                                            </el-menu-item>
                                        </div>
                                        <div v-if="arr.children.length == 0 && arr.lever == 1"
                                            style="display: flex; align-items: center">
                                            <el-menu-item :index="arr.path" style="padding-left: 23px !important">
                                                <template slot="title">
                                                    <i :class="arr.img" :style="{ width: arr.width }"></i>
                                                    <div class="secondaryView">
                                                        <span class="meneTitle" slot="title">{{
                                                            arr.title
                                                        }}</span>
                                                    </div>
                                                </template>
                                            </el-menu-item>
                                        </div>
                                        <div v-if="arr.children.length == 0 && arr.lever == 2" class="eidtMenu"
                                            style="display: flex; align-items: center">
                                            <div class="threeEidtMenu">
                                                <div slot="title">
                                                    <el-menu-item :index="arr.path">
                                                        <template slot="title">
                                                            <!-- 跳查看 -->
                                                            <div class="secondaryView">
                                                                <i :class="arr.img" :style="{ width: arr.width }"></i>
                                                                <span class="meneTitle" slot="title">{{
                                                                    arr.title
                                                                }}</span>
                                                            </div>
                                                        </template>
                                                    </el-menu-item>
                                                    <!-- 跳编辑 -->
                                                    <el-menu-item v-if="arr.path2" :index="arr.path2" class="el-icon-edit">

                                                    </el-menu-item>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 有三级 -->
                                        <div v-else>
                                            <div class="threeMenu">
                                                <div slot="title" class="threeMenuTitle">
                                                    <el-submenu :index="i + num + 's1'" v-if="arr.lever == 0">
                                                        <template slot="title">
                                                            <i :class="arr.img" :style="{ width: arr.width }"></i>
                                                            <span class="meneTitle" slot="title">{{
                                                                arr.title
                                                            }}
                                                            </span>
                                                        </template>
                                                        <!-- 三级循环 -->
                                                        <div v-for="(item, index) in arr.children" :key="index">
                                                            <div v-if="item.children.length == 0" class="threeMenuItem">
                                                                <el-menu-item :index="item.path" style="
                                    ">
                                                                    <template slot="title">
                                                                        <!-- 跳查看 -->
                                                                        <div class="secondaryView">
                                                                            <i :class="item.img"
                                                                                :style="{ width: item.width }"></i>
                                                                            <span class="meneTitle" slot="title">{{
                                                                                item.title
                                                                            }}</span>
                                                                        </div>
                                                                    </template>

                                                                    <!-- 三级循环里既有查看又有编辑 -->
                                                                </el-menu-item>
                                                                <!-- 跳编辑 -->
                                                                <el-menu-item v-if="item.path2" :index="item.path2"
                                                                    class="el-icon-edit">
                                                                </el-menu-item>
                                                            </div>
                                                            <!-- 还有四级循环 -->
                                                            <!-- 四级循环里既有查看又有编辑 -->
                                                            <div v-else style="width: 100%">
                                                                <el-submenu :index="item + num + 'sf1'"
                                                                    v-if="item.lever == 0" class="fourMuen">
                                                                    <template slot="title">
                                                                        <i :class="item.img"
                                                                            :style="{ width: item.width }"></i>
                                                                        <span class="meneTitle" slot="title">{{
                                                                            item.title
                                                                        }}</span>
                                                                    </template>
                                                                    <!-- 四级循环里只有查看 -->
                                                                    <el-menu-item :index="it.path"
                                                                        v-for="(it, index) in item.children" :key="index">
                                                                        <div v-if="it.children.length == 0"
                                                                            class="fourMeunItem">
                                                                            <i :class="it.img"
                                                                                :style="{ width: it.width }"></i>
                                                                            <span class="meneTitle" slot="title">{{
                                                                                it.title
                                                                            }}</span>
                                                                        </div>
                                                                    </el-menu-item>
                                                                </el-submenu>
                                                            </div>
                                                        </div>
                                                    </el-submenu>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-submenu>
                            </fragment>
                        </el-menu>
                        <!-- <div class="userInfo">
                            <div class="iconsv">
                                <img class="iconimg" :src="userInfo.gender == 0 ? girls : boys" alt="" />
                            </div>
                            <div class="name">{{ userInfo.realName }}</div>
                        </div> -->
                    </el-aside>

                    <el-container class="container">
                        <div class="topcontent" style="height:36px">456</div>
                        <div class="content">

                            <router-view v-if="isReloadAlive" />
                        </div>
                    </el-container>
                </el-container>
            </el-main>
        </el-container>
    </div>
</template>
  
<script>
import {
    getBaseModuleList, //功能目录列表
} from "@/api/request.js";
export default {
    name: "Home",
    components: {
        // PositionTitle,
        // Mechanisma,
    },
    provide() {
        return {
            reload: this.reload,
        };
    },

    data() {
        return {
            isReloadAlive: true,
            // 是否全屏
            fullscreen: false,
            // 被激活的链接地址
            activePath: "/index",
            // 是否折叠
            isCollapse: false,
            fristModule: [],
            userInfo: {},
            boys: require("../assets/img/organization/boys.png"),
            girls: require("../assets/img/organization/girls.png"),
            leftNameData: this.$store.state.leftNameData,
        };
    },
    created() {
        this.userInfo = JSON.parse(sessionStorage.getItem("GxEmbedded_userInfo"));
    },
    // computed: {
    //   getOutterNum: function () {
    //     console.log(this.$store.state.leftNameData);
    //     return this.$store.state.leftNameData
    //   }
    // },
    mounted() {
        this.activePath = sessionStorage.getItem("GxEmbedded_keyPath") || "/index";
        this.roleModule();
    },
    watch: {
        activePath(newValue) {
            if (newValue != this.$route.path) {
                this.activePath = this.$route.path;
            }
        },
    },

    methods: {
        goHome() {
            this.$router.push({ path: "/index" });
        },
        roleModule() {
            var ModuleList = JSON.parse(sessionStorage.getItem("GxEmbedded_ModuleList"));
            var fristModule = [];
            if (ModuleList.length != 0) {
                this.leftNameData.map((i) => {
                    //筛选大模块
                    ModuleList.map((item) => {
                        if (item.fEncode == i.name) {
                            i.title = item.fFullname;
                            fristModule.push(i);
                        }
                    });
                });

                fristModule.map((item) => {
                    //只有两级
                    item["childrens"] = [];
                    item.children.map((i) => {
                        ModuleList.map((j) => {
                            if (i.name == j.fEncode) {
                                // console.log(i, j);
                                i.title = j.fFullname;
                                item["childrens"].push(i);
                            }
                        });
                    });
                    item.children = item.childrens;
                });
                // 有三级
                fristModule.map((item) => {
                    item.children.map((i) => {
                        //二级
                        i["childrens"] = [];
                        i.children.map((h) => {
                            //循环3级
                            ModuleList.map((j) => {
                                if (h.name == j.fEncode) {
                                    h.title = j.fFullname;
                                    i["childrens"].push(h);
                                }
                            });
                        });

                        i.children = i.childrens;
                    });
                });

                fristModule.map((item) => {
                    item.children.map((i) => {
                        if (i.rank == 2) {
                            i.path2 = "";
                            ModuleList.map((j) => {
                                if (i.name2 == j.fEncode) {
                                    i.path2 = i.path + "Text";
                                }
                            });
                        }
                    });
                });

                this.leftNameData = fristModule;
            } else if (
                JSON.parse(sessionStorage.getItem("GxEmbedded_userInfo")).enCode == "System"
            ) {
                this.getTree();
            } else {
                this.leftNameData = [];
                return this.$message.error("请配置对应权限");
            }
        },

        leftNameDataData(val, data) {
            // val:树接口  data:本地
            let list = [];
            if (!Array.isArray(data)) {
                return list;
            }
            list = data.map((item) => {
                if (item.children.length > 0) {
                    this.leftNameDataData(val, item.children);
                }
                val.map((i) => {
                    // 接口等于本地
                    if (i.fEncode == item.name) {
                        item.title = i.fFullname;
                    }
                });

                return item;
            });

            return list;
        },
        getTree() {
            getBaseModuleList({
                fModuleid: "",
            })
                .then((res) => {
                    if (res.errcode == 0) {
                        var companyTree = res.data.baseModuleList;
                        this.leftNameData = this.leftNameDataData(
                            companyTree,
                            this.leftNameData
                        );
                    } else {
                        this.$message.error(res.msg);
                        return false;
                    }
                })
                .catch(() => {
                    return false;
                });
        },
        reload() {
            this.isReloadAlive = false;
            this.$nextTick(function () {
                this.isReloadAlive = true;
            });
        },

        openMenu(keyPath, obj) {
            console.log(obj);
            if (keyPath != "null") {
                sessionStorage.setItem("GxEmbedded_keyPath", keyPath);
            }
        },
        // 是否全屏
        screen() {
            let element = document.documentElement;
            if (this.fullscreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
            }
            this.fullscreen = !this.fullscreen;
        },

        toggleCollapse() {
            this.isCollapse = !this.isCollapse;
        },

        back() {
            this.$confirm("是否继续退出?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    window.localStorage.removeItem("GxEmbedded_token");
                    this.$router.push("/");
                })
                .catch(() => {
                    this.loading = false;
                    this.$message.info("取消退出");
                });
        },
    },
};
</script>
<style scoped lang="less">
@import '@/views/home.less';
</style>
  